<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="./../template/MemberTemplate.xhtml">

    <ui:define name="contentInsert">

        <h4> Dear <h:outputText value="#{tableBookingMB.customerEmail}"/>,
            <br/>Welcome to <h:outputText value="#{tableBookingMB.stakeholderOutletName}"/></h4>
        <h5>Booking Period:
            <font color="#0000"><h:outputText value="#{tableBookingMB.startDateStr}" /> -- <h:outputText value="#{tableBookingMB.endDateStr}"/>
            </font></h5>
        <br/>
        <h:form id="form1">
            <p:growl id="msgs"/>
            <h:panelGrid columns="3" >
                <h:outputLabel for="date" value="Enter Reservation Date: "/>
                <p:calendar id="date" value="#{tableBookingMB.date}" mindate="#{tableBookingMB.startDate}"
                            maxdate="#{tableBookingMB.endDate}" selectListener="#{tableBookingMB.updateDate}"
                            onSelectUpdate="area">
                </p:calendar>
                <p:ajaxStatus style="width:16px;height:16px;">  
                    <f:facet name="start">  
                        <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />  
                    </f:facet>  
                    <f:facet name="complete">  
                        <h:outputText value="" />  
                    </f:facet>  
                </p:ajaxStatus>  

                <h:outputLabel for="area" value="Select Dining Area: "/>
                <h:selectOneMenu id="area" value="#{tableBookingMB.areaName}" >
                    <f:selectItem itemValue="default" itemLabel="--Please select an area--"/>
                    <f:selectItems value="#{tableBookingMB.areaNames}"/> 
                    <p:ajax update="timeslots,diners"   
                            listener="#{tableBookingMB.areaChange}" />
                </h:selectOneMenu>
                <p:commandButton image="ui-icon ui-icon-image" action="#{tableBookingMB.photoFilePath()}" onclick="dlg2.show();" update="popImage"/>  
                <h:outputText/>
                <h:selectOneMenu id="timeslots" value="#{tableBookingMB.timeslot}"  >
                    <f:selectItem itemValue="default" itemLabel="--Please select dining time--"/>
                    <f:selectItems value="#{tableBookingMB.timeslotList}" />
                </h:selectOneMenu>

                <h:selectOneMenu id="diners" value="#{tableBookingMB.diner}"  >
                    <f:selectItem itemValue="default" itemLabel="--Number of Diners--"/>
                    <f:selectItems value="#{tableBookingMB.dinerList}" />
                </h:selectOneMenu>

            </h:panelGrid>
            <p:dialog header="View Area" widgetVar="dlg2" modal="true"  width="425" height="300">  
                <p:graphicImage id="popImage" value="#{tableBookingMB.photo}"/>
            </p:dialog>  

            <br/>
            <h:outputLabel for="comments" value="Comments: " />
            <p:inputTextarea id="comments" value="#{tableBookingMB.comments}" style="width:500px" rows="15"/>
            <br/>

            <h:commandButton value="Book this table" actionListener="#{tableBookingMB.getStatus}" action="BookingStatus?faces-redirect=true" style="font-weight:bold"/>
        </h:form>
    </ui:define>
</ui:composition>
